<template>
    <div class="tab-box">
        <div class="tab-list">
            <router-link :to="{ path: '/brief' }" class="tab-items" tag="div">
                <a>一句话经验</a>
            </router-link>
            <router-link :to="{ path: '/tools' }" class="tab-items" tag="div">
                <a>常用插件</a>
            </router-link>
            <router-link :to="{ path: '/experience' }" class="tab-items" tag="div">
                <a>老生常谈</a>
            </router-link>
            <router-link :to="{ path: '/article' }" class="tab-items" tag="div">
                <a>文章推荐</a>
            </router-link>
            <router-link :to="{ path: '/share' }" class="tab-items" tag="div">
                <a>往期分享</a>
            </router-link>
        </div>
    </div>
</template>
<script>
export default {};
</script>
<style lang="scss">
@import '../../common/scss/fun.scss';
.tab-box{
    width: 100%;
    margin: 20px 0;

    .tab-list{
        width: 1200px;
        margin: 0 auto;
        height: 60px;
        line-height: 60px;
        display: flex;
        justify-content: space-between;
        border: 1px solid #d4d4d4;
        border-radius: 4px;

        .tab-items{
            width: 20%;
            height: 58px;
            text-align: center;
            cursor: pointer;
            background: #f8f8f8;
            border-right: 1px solid #d4d4d4;
            overflow: hidden;
            transition: background 200ms ease;

            &:last-child{
                border-right: none;
            }

            a{
                display: block;
                width: 100%;
                height: 100%;
                text-decoration: none;
                color: #777;
                &:hover{
                    color: #000;
                }
            }
            &.arctive{
                background: #e5e5e5;
                border-right: none;
                
                box-shadow: inset 0px 0px 10px #d4d4d4;
                a{
                    color: #000;
                }
            }
            &:first-child{
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;
            }
            &:last-child{
                border-top-right-radius: 4px;
                border-bottom-right-radius: 4px;
            }
        }
    }
}
</style>
